<template>
  <div class="records-page">
    <div class="page-header">
      <h2 class="page-title">历史记录</h2>
      <div class="header-actions">
        <el-button
          type="danger"
          plain
          :disabled="selectedIds.length === 0"
          @click="handleBatchDelete"
        >
          批量删除 ({{ selectedIds.length }})
        </el-button>
      </div>
    </div>
    
    <!-- 过滤器 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="filters">
        <el-form-item label="城市">
          <el-select
            v-model="filters.city"
            placeholder="选择城市"
            clearable
            @change="handleFilterChange"
          >
            <el-option
              v-for="city in recordsStore.cities"
              :key="city"
              :label="city"
              :value="city"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleDateRangeChange"
          />
        </el-form-item>
        
        <el-form-item label="天气类型">
          <el-select
            v-model="filters.weatherType"
            placeholder="选择天气"
            clearable
            @change="handleFilterChange"
          >
            <el-option
              v-for="type in recordsStore.weatherTypes"
              :key="type"
              :label="type"
              :value="type"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="resetFilters">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 记录列表 -->
    <el-table
      v-if="recordsStore.filteredRecords.length > 0"
      :data="recordsStore.filteredRecords"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="city" label="城市" width="120" />
      <el-table-column prop="temperature" label="温度" width="100">
        <template #default="{ row }">
          {{ row.temperature }}°C
        </template>
      </el-table-column>
      <el-table-column prop="weather" label="天气" width="100" />
      <el-table-column prop="humidity" label="湿度" width="100">
        <template #default="{ row }">
          {{ row.humidity }}%
        </template>
      </el-table-column>
      <el-table-column prop="windSpeed" label="风速" width="120">
        <template #default="{ row }">
          {{ row.windSpeed }} km/h
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="记录时间" width="180">
        <template #default="{ row }">
          {{ formatDateTime(row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120">
        <template #default="{ row }">
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-empty
      v-else
      description="暂无记录"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRecordsStore } from '@/stores/records'
import { formatDateTime } from '@/utils/format'
import { ElMessageBox } from 'element-plus'
import type { WeatherRecord } from '@/types/weather'

const recordsStore = useRecordsStore()

// 过滤条件
const filters = reactive({
  city: '',
  weatherType: ''
})

const dateRange = ref<[Date, Date] | null>(null)
const selectedIds = ref<string[]>([])

// 处理过滤条件变化
const handleFilterChange = () => {
  recordsStore.setFilters({
    ...filters,
    startDate: dateRange.value?.[0]?.getTime(),
    endDate: dateRange.value?.[1]?.getTime()
  })
}

// 处理日期范围变化
const handleDateRangeChange = () => {
  handleFilterChange()
}

// 重置过滤条件
const resetFilters = () => {
  filters.city = ''
  filters.weatherType = ''
  dateRange.value = null
  recordsStore.setFilters({})
}

// 处理选择变化
const handleSelectionChange = (selection: WeatherRecord[]) => {
  selectedIds.value = selection.map(item => item.id)
}

// 删除单条记录
const handleDelete = async (id: string) => {
  await ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  
  recordsStore.deleteRecord(id)
}

// 批量删除
const handleBatchDelete = async () => {
  await ElMessageBox.confirm(
    `确定要删除选中的 ${selectedIds.value.length} 条记录吗？`,
    '批量删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
  
  selectedIds.value.forEach(id => {
    recordsStore.deleteRecord(id)
  })
  
  selectedIds.value = []
}
</script>

<style lang="scss" scoped>
.records-page {
  padding: 20px;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .page-title {
      margin: 0;
      font-size: 24px;
    }
  }
  
  .filter-card {
    margin-bottom: 20px;
  }
}
</style> 